<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东旅游网</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="styles.css">
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body>
    <header>
        <div class="logo">山东旅游网</div>
        <nav>
            <ul>
                <li><a href="customer.jsp">首页</a></li>
                <li><a href="beautifulshandong.jsp">魅力山东</a></li>
                <li><a href="infomation.jsp">资讯</a></li>
                <li><a href="scenicspots.jsp">景点</a></li>
                <li><a href="ticketpurchase.jsp">购票</a></li>
            </ul>
        </nav>

        <nav class="user-actions">
            <ul>
                <li><a href="#">${userInfo.username}[${userInfo.memberLevel}]</a></li> 
                <li><a href="userinfo.jsp">个人信息</a></li>
                <li><a href="SalesRecordServlet?userID=${userInfo.userID}&usermemberLevel=${userInfo.memberLevel}">消费记录</a></li>
                <li><a href="#">留言与回复</a></li>
                <li><a href="login.jsp">退出</a></li>
            </ul>
        </nav>

    </header>

    <main>
        <div class="navbar-container">
            <nav class="navbar">
                <a href="#home">出游指南</a>
                <a href="#news">本地景点</a>
                <a href="#contact">外地景点</a>
                <a href="#about">热门景点</a>
            </nav>
            <div class="search-box">
                <input type="text" placeholder="查询景点信息" class="search-input">
                <button type="submit" class="search-btn"><i class="fas fa-search"></i></button>
            </div>
        </div>

        <div class="slider-wrapper">
            <div class="slider-container">
                <div class="slider-main" id="slider">
                    <div><img src="./images/LunBoTu_1.jpg" ></div>
                    <div><img src="./images/LunBoTu_2.jpg" ></div>
                    <div><img src="./images/LunBoTu_3.jpg" ></div>
                </div>
                <div class="slider-arrows">
                    <button type="button" class="prev-arrow"><i class="fas fa-chevron-left"></i></button>
                    <button type="button" class="next-arrow"><i class="fas fa-chevron-right"></i></button>
                </div>
                <ul class="slick-dots-custom">
                    <li data-slide-to="0" class="slick-active"><button type="button"></button></li>
                    <li data-slide-to="1"><button type="button"></button></li>
                    <li data-slide-to="2"><button type="button"></button></li>
                </ul>
            </div>
        </div>

        <!-- 热门景点部分 -->
        <section class="hot-spots">
            <h2>热门景点</h2>
            <ul class="hot-spots-list">
                <li>
                    <img src="./images/LunBoTu_1.jpg" alt="张家界风景">
                    <h3>张家界</h3>
                    <p>奇峰异石，峡谷深壑，景色壮美，仿佛仙境一般。</p>
                    <a href="#">查看详情</a>
                </li>
                <li>
                    <img src="./images/LunBoTu_2.jpg" alt="衡山风景">
                    <h3>衡山</h3>
                    <p>五岳之一，山势雄伟，古木参天，香火旺盛。</p>
                    <a href="#">查看详情</a>
                </li>
                <li>
                    <img src="./images/LunBoTu_3.jpg" alt="凤凰古城风景">
                    <h3>凤凰古城</h3>
                    <p>具有浓郁的苗族和土家族风情，古城建筑别具一格。</p>
                    <a href="#">查看详情</a>
                </li>
            </ul>
        </section>
    </main>

    <footer>
        <div class="footer-container">
            <div class="footer-left">
                <div class="footer-logo">
                    
                </div>
                <div class="footer-text">
                    <p>
                       
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="script.js"></script>
    </body>
    <style>
         /* 全局样式 */
	    body {
	        margin: 0;
	        padding: 0;
	        font-family: Arial, sans-serif;
	        display: flex;
	        flex-direction: column;
	    }
	
	    /* 头部样式 */
	    header {
	        background-color: white;
	        display: flex;
	        justify-content: space-between;
	        height: 60px;
	        align-items: center;
	        padding: 10px 20px;
	        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	    }
	
	  .logo {
	        color: orange;
	        font-size: 24px;
	        font-weight: bold;
	    }
	
	    nav ul {
	        list-style-type: none;
	        margin: 0;
	        padding: 0;
	        display: flex;
	    }
	
	    nav ul li {
	        margin-left: 20px;
	    }
	
	    nav ul li a {
	        text-decoration: none;
	        color: gray;
	    }
	
	    nav ul li a:hover {
	        color: black;
	    }

       .user-actions ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
        }

       .user-actions ul li {
            margin-left: 20px;
        }

       .user-actions ul li a {
            text-decoration: none;
            color: #666;
            font-size: 16px;
            transition: color 0.3s ease;
        }

       .user-actions ul li a:hover {
            color: #FF5733;
        }


        /* 导航栏与搜索框整体样式 */
       .navbar-container {
            background-color: #008000;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

       .navbar {
            display: flex;
            margin-left: 30px;
        }

       .navbar a {
            color: #fff;
            text-decoration: none;
            padding: 10px 20px;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

       .navbar a:hover {
            background-color: orange;
        }

       .search-box {
            display: flex;
            align-items: center;
            margin-right: 30px;
        }

       .search-input {
            border: none;
            border-radius: 25px;
            padding: 10px 20px;
            width: 300px;
            font-size: 16px;
            background-color: rgba(255, 255, 255, 0.8);
            color: #333;
        }

       .search-btn {
            background-color: transparent;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 18px;
            margin-left: -40px;
            padding: 5px;
            transition: color 0.3s ease;
        }

       .search-btn:hover {
            color: orange;
        }


        /* 轮播图外层包装样式 */
       .slider-wrapper {
            max-width: 1200px;
            margin: 30px auto;
            border-radius: 10px;
            overflow: hidden;
        }

        /* 轮播图容器样式 */
       .slider-container {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        /* 轮播图主体样式 */
       .slider-main img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 10px;
        }

        /* 轮播图箭头样式 */
       .slider-arrows {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            width: 100%;
            justify-content: space-between;
            z-index: 1;
        }

       .prev-arrow,
       .next-arrow {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 15px 20px;
            cursor: pointer;
            font-size: 24px;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }

       .prev-arrow:hover,
       .next-arrow:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }


        /* 自定义轮播图小圆点样式 */
       .slick-dots-custom {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 0;
            padding: 0;
            z-index: 1;
        }

       .slick-dots-custom li {
            margin: 0 8px;
        }

       .slick-dots-custom li button {
            width: 12px;
            height: 12px;
            background-color: #ccc;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .slick-dots-custom li.slick-active button {
            background-color:orange;
        }

       .slick-dots-custom li button:hover {
            background-color: orange;
        }


         /* 热门景点区域样式 */
  .hot-spots {
        margin-top: 30px;
        text-align: left;
        width: 1200px;
        margin: 0 auto;
        text-align: center;
    }

  .hot-spots h2 {
        color: orange;
        font-size: 20px;
        margin-bottom: 10px;
    }

  .hot-spots-list {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

  .hot-spots-list li {
        width: 30%;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        overflow: hidden;
    }

  .hot-spots-list li img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

  .hot-spots-list li img:hover {
        transform: scale(1.1);
    }

  .hot-spots-list li h3 {
        font-size: 16px;
        margin: 10px;
        color: gray;
    }

  .hot-spots-list li p {
        font-size: 14px;
        margin: 0 10px 10px 10px;
        color: #777;
    }

  .hot-spots-list li a {
        display: block;
        text-align: center;
        background-color: green;
        color: white;
        padding: 5px 10px;
        margin: 0 10px 10px 10px;
        text-decoration: none;
        border-radius: 4px;
    }

  .hot-spots-list li a:hover {
        background-color: #008000;
    }

  .hot-spots.see-more-btn {
        display: block;
        margin: 20px auto;
        background-color: green;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4  4px;
        cursor: pointer;
    }

  .hot-spots.see-more-btn:hover {
        background-color: #008000;
    }  
  

  .rectangle {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: gray;
            margin-right: 5px;
        }
  .news-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 1px solid #e0e0e0;
    }

  .news-file {
        color: #333;
        font-size: 16px;
    }

  .news-date {
        color:  999;
        font-size: 14px;
    }

  

    /*  footer样式 */
    footer {
        background-color: green;
        color: white;
        padding: 15px 0;
        width: 100%;
        height: 40px;
    }

  .footer-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        
    }

  .footer-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

  

  .footer-text {
        text-align: center;
    }
     .navbar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        }

        /* 导航链接样式 */
        .navbar a {
            color: white;
            text-decoration: none;
            padding: 14px 20px;
            display: block;
        }

        /* 搜索框样式 */
        .search-box {
            padding: 10px;
        }
</style>
<script>
$(document).ready(function () {
    $('#slider').slick({
        autoplay: true,
        autoplaySpeed: 3000,
        dots: false, 
        arrows: false
    });

    // 点击左箭头切换图片
    $('.prev-arrow').click(function () {
        $('#slider').slick('slickPrev');
    });

    // 点击右箭头切换图片
    $('.next-arrow').click(function () {
        $('#slider').slick('slickNext');
    });

    // 监听幻灯片切换之前的事件
    $('#slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        // 移除所有小圆点的激活状态
        $('.slick-dots-custom li').removeClass('slick-active');
        // 添加激活状态到即将显示的幻灯片对应的小圆点
        $('.slick-dots-custom li[data-slide-to="' + nextSlide + '"]').addClass('slick-active');
    });

    // 监听自定义小圆点的点击事件
    $('.slick-dots-custom li').click(function () {
        var slideIndex = $(this).data('slide-to');
        $('#slider').slick('slickGoTo', slideIndex);
    });
});

 
</script>


</html>